<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
  <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css">
  <script src="http://unpkg.com/iview/dist/iview.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/locale/zh-cn.js"></script>
  <script src="./assets/lib/axios.min.js"></script>
  <script src="./assets/js/axios.js"></script>
  <script src="./assets/lib/cookie.js"></script>
  <script src="./assets/js/payconfig.js"></script>
  <link rel="stylesheet" href="./assets/css/pay.css">
  <script>
    var wdTrue = false;

    if (location.hostname == "www.wandaly.net") { wdTrue = true; }

    if (!!wdTrue) {
      document.write("<scr" + "ipt id='spay-script' type='text/javascript' src='https://jspay.beecloud.cn/1/pay/jsbutton/returnscripts?appId=2a8c2fed-03f1-42d0-a0c8-f6309de61861'></scr" + "ipt>");
    } else {
      document.write("<scr" + "ipt id='spay-script' type='text/javascript' src='https://jspay.beecloud.cn/1/pay/jsbutton/returnscripts?appId=33ec1a4a-f9ae-4493-a327-7076e51e7476'></scr" + "ipt>");
    }
  </script>
  <title>支付订单</title>
</head>

<body>
  <div class="wrap" id="wrap" v-if="orderDetails">
    <div class="setpbar">
      <steps :current="1">
        <step title="填写订单"></step>
        <step title="在线支付"></step>
        <step title="预定成功"></step>
      </steps>
    </div>
    <div class="order-ccc">
      <div class="moneybar">
        <div class="left">
          <span class="tip">应付金额</span>
          <span>
            <em>￥</em>
            <span class="price">{{orderDetails.TotalPrice}}</span>
          </span>
        </div>
        <div class="right" @click="showDetails">
          订单详情
        </div>
      </div>
      <div class="orderdetails" v-show="detailsshow">
        <p>订单编号:{{orderDetails.AffiliateConfirmationId}}</p>
        <p>酒店名称:{{orderDetails.HotelName}}</p>
        <p>产品名称:{{orderDetails.RoomTypeName}}</p>
      </div>
      <div class="orderprice">
        <p>订单金额：￥{{orderDetails.TotalPrice}}</p>
        <p>剩余支付费时间:{{countDown}}</p>
      </div>
    </div>
    <div class="buy" style="padding:50px;">
      <i-button type="warning" size="large" long @click="ToPay">支付</i-button>
    </div>
  </div>
</body>
<script>
  var self = null;
  var app = new Vue({
    el: '#wrap',
    data() {
      return {
        sign:'',
        guestIp:'',
        countDown: 'HH:mm:ss',
        detailsshow: false,
        orderDetails: null,
        AffiliateConfirmationId: '',//本地订单号
        usersecret: {
          userid: Cookie.get('USERIDGDLY'),
          sercet: Cookie.get('usersecret'),
          userphone: Cookie.get('gdmobileuserphone'),
          where: Cookie.get('WHERE')
        },
      }
    },
    computed: {
      tokenparams() {
        return "?token=" + self.usersecret.userid + "|" + self.usersecret.sercet + "|" + self.usersecret.userphone + "|" + self.usersecret.where
      },
      countdownTime() {
        // if(this.orderDetails)
        return '';
      }
    },
    created() {
      self = this;
      this.AffiliateConfirmationId = this.GetQueryString('AffiliateConfirmationId');
      axios.get('/api/eLongHotels/HotelLocalOrders/GetHLOrderByNo/' + this.AffiliateConfirmationId + this.tokenparams).then(function (orderinfo) {
        self.orderDetails = orderinfo.data;
        console.log('本地订单详情', orderinfo);
        axios
          .all([
            getIp(),
            getSign(
              "酒店在线预定",
              self.orderDetails.AffiliateConfirmationId,
              self.orderDetails.TotalPrice
            )
          ])
          .then(
            axios.spread(function (ip, sig) {
                self.sign=sig.data;
                self.guestIp=ip.data;
             }));

        self.getCountdown();
      })
    },
    methods: {
      ToPay() {
        //支付？？？？

        BC.click({
          title: "酒店在线预定",
          amount: parseInt(this.orderDetails.TotalPrice * 100),
          out_trade_no: this.orderDetails.AffiliateConfirmationId,
          sign: this.sign,
          // debug:true,
          return_url: 'http://m.czgdly.com/airplane/FlightTickets', //http://m.czgdly.com/airplane/FlightTickets/#/list
          optional: {
            contactId:self.usersecret.userid,
            contactSource: self.usersecret.where,
            orderId: self.orderDetails.TotalPrice
            // mainOrderNo: this.mainorderno
          },
          analysis: {
            ip: this.guestIp
          },
          openid: ''
        }
          // , {
          //     wxJsapiFinish: function (res) {
          //       //jsapi接口调用完成后
          //       // alert(JSON.stringify(res));
          //       if (res.err_msg == "get_brand_wcpay_request:ok") {
          //         // window.href=""
          //         window.location.href = returnurl
          //       }
          //     }
          //   }
        );
      },
      paddZero(num) {//补零
        // num
        if (num < 10) {
          return '0' + num;
        } else {
          return num;
        }
      },
      getCountdown() {
        var Inser = 0;
        if (this.orderDetails) {
          // self.orderDetails.PaymentDeadlineTime = '2018-04-23 15:44:39'
          Inser = setInterval(function () {
            var sec = (moment(self.orderDetails.PaymentDeadlineTime).diff(moment())) / 1000; //秒
            if (sec > 0) {
              // console.log(Math.floor(sec / 3600)+'小时'+Math.floor((sec % 3600) / 60)+'分钟'+Math.floor((sec % 3600) % 60)+'秒')
              self.countDown = self.paddZero(Math.floor(sec / 3600)) + '小时' + self.paddZero(Math.floor((sec % 3600) / 60)) + '分钟' + self.paddZero(Math.floor((sec % 3600) % 60)) + '秒'
            } else {
              clearInterval(Inser);
              self.$Modal.warning({
                title: '提示',
                content: '订单已过最晚支付时间请稍后重新下单',
                onOk: function () {
                  window.location.href = 'index.html';
                }
              });
              self.countDown = '超时'
            }
          }, 1000)
        }
      },
      showDetails() {
        this.detailsshow = !this.detailsshow;
      },
      GetQueryString: function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      },
    }
  })
</script>

</html>